<template>
  <div>
    <router-link to="/routerss/page1">点击到page1</router-link>
     <router-link to="/routerss/page2">点击到page2</router-link>

     <transition mode="out-in">
       <router-view></router-view>
    </transition>

  </div>
</template>

<script>
  import xinde from "./xinde"
  export default {

    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
  //   components:{
  //     xinde,

  //   }
  }

</script>

<style>
  .v-enter-active {
    transition: all .3s ease;
  }
  .v-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .v-enter, .v-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }

</style>
